<template>
    <div class="wrapper">
		
		<div class="util">
			<el-button type="primary" class="add-button" plain @click="add(0, 1)">添加模块</el-button>
			<span>模块名称：</span>
			<el-input
				style="width: 260px;"
				placeholder="营销模块"
				v-model="searchValue"
			>
				<template #append>
					<el-button :icon="Search" @click="search()">
					</el-button>
				</template>
			</el-input>
		</div>
		
		<div class="main">
			<el-table
				:data="tableData"
				row-key="id"
				:header-cell-style="{background:'#F3F4F7',color:'#555',}"
			>
				<el-table-column label="模块名称" prop="name"></el-table-column>
				<el-table-column label="模块状态">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status" type="success">正常</el-tag>
                        <el-tag v-else>停用</el-tag>
                    </template>
                </el-table-column>
				<el-table-column label="模块描述" prop="description"></el-table-column>
				<el-table-column label="操作">
					<template #default="scope">
						<el-button type="primary" size="small" @click="updateGoods(scope.row.id)">修改商品</el-button>
						<el-button type="primary" size="small" @click="update(scope.row.id)">修改</el-button>
						<el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog
			v-model="dialog.show"
			:title="dialog.title"
			width="450px"
			:close-on-click-modal="false"
		>
			<Dialog
				v-if="dialog.show"
				@getTableData="getTableData"
				v-model:show="dialog.show"
				:id="dialog.id"
                :close-on-click-modal="false"
			></Dialog>
		</el-dialog>
        
        <el-dialog
            v-model="updateGoodsDialog.show"
            title="修改模块商品"
            width="700px"
            style="padding: 20px;"
            :close-on-click-modal="false"
        >
            <UpdateGoods
                v-if="updateGoodsDialog.show"
                v-model:show="updateGoodsDialog.show"
                :marketingId="updateGoodsDialog.marketingId"
            ></UpdateGoods>
        </el-dialog>
    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { copy } from 'copy-anything'
import { reactive, ref } from 'vue'
import UpdateGoods from './updateGoods'
import { get, post } from '@/plugins/axios'
import url from './pathUtil'
import { ElMessage, ElMessageBox } from 'element-plus'
import Dialog from './dialog'

/* -------------------------数据部分------------------------------ */
//ref式响应数据一定要用.value来修改
const tableData = ref([])
//存储备份数据
const params = reactive({})
const formObj = null
const dialog = reactive({
	title: '',
	id: '',
	show: false
})
const updateGoodsDialog = reactive({
    show: false,
    marketingId: null
})
const searchValue = ref('')

/* -------------------------函数部分------------------------------ */
//获取表格数据
getTableData()
function getTableData() {
    get(url.list, params, content => {
        console.log(content)	
		tableData.value = content
	})
}
//删除
function del(id) {
	if(null != id) {
		const text = '确定要删除该营销吗'
		ElMessageBox.confirm(text, '警告', {
			type: 'warning'
		}).then(() => {
			post(url.del, { id }, content => {
				getTableData()
			},formObj)
		})
	}
}
//添加 传参为了后续给数据库相应的参数
function add(parentId, level) {
	dialog.title = '添加营销'
	dialog.show = true
	dialog.id = null
	dialog.level = level
	dialog.parentId = parentId
}
//修改
function update(id) {
    console.log('进入update')
	dialog.id = id
	dialog.title = '修改营销'
    dialog.show = true
    console.log('dialog.show', dialog.show)
}
function updateGoods(id) {
    console.log('function updateGoods()')
    updateGoodsDialog.show = true
    updateGoodsDialog.marketingId = id
}
//搜索
function search() {
	//去除全部空格
	if(searchValue.value.trim() !== '') {
        get(url.search, { searchValue: searchValue.value }, content => {
            tableData.value = content
        })
		
	}else {
		ElMessage({
			message: '您的输入框为空，已为您展示全部数据',
			type: 'warning'
        })
        getTableData()
	}
}

</script>

<style lang="scss" scoped>
.wrapper{
	height: 80vh;
	.util{
		width: 100%;
		height: 50px;
		background-color: #ffffff;
		border-radius: 4px;
		margin-bottom: 20px;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
		display: flex;
		align-items: center;
		.add-button{
			margin-left: 20px;
			margin-right: 809px;
		}
		span{
			font-size: 14px;
			margin-left: 20px;
		}
	}
	.main{
		width: 100%;
		padding: 15px;
		background-color: #ffffff;
		border-radius: 4px;
		box-shadow: 2px 0px 10px rgba(0,0,0,0.2);
	}
}
</style>